/**
 *通用形列表-弹框部分
 */
<template>
    <!-- 必须加一个div。不然高度被拉满了 -->
    <div>
        <el-dialog
            v-model="dialogObj.dialogVisible"
            :title="`${route.meta.title} —— ${dialogObj.dialogTitle}`"
            width="85%"
            center
            align-center
            destroy-on-close
            draggable
            overflow
            :close-on-click-modal="false"
            class="my-dialog"
        >
            <!-- <span>This is a message</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogObj.dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogObj.dialogVisible = false">
                        Confirm
                    </el-button>
                </div>
            </template> -->
            <component 
                :is="dialogObj.dialogComponent" 
                v-model:dialogObj="dialogObj" 
                @tabelSearch="tabelSearch" 
            />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
    } from '@element-plus/icons-vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const dialogObj = defineModel<any>('dialogObj', {
        required: false,
        default: {
            dialogTitle: false, //dialog标题
            dialogVisible: false, //dialog显示
            dialogComponent: '', //组件
            dialogParams: {}, //组件参数
        }
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        'tabelSearch': [data: any]
    }>()
    const tabelSearch = (val) => {
        emits('tabelSearch', val)
    }
</script>

<style lang="scss" scoped>
    :deep(.my-dialog) {
        height: 90%; 
        overflow: hidden;
        .el-dialog__body {
            height: 95%; 
            // overflow-x: hidden;
            // overflow-y: scroll;
        }
    }
</style>